<template>
    <div class="login">
       
        <el-form ref='form' v-model="loginForm" :rules='loginRules' class="login-form">
                 
            <h3 class="title">老薑后台管理系统</h3>
            <el-form-item prop='username'>
                <el-input v-model="loginForm.username" type='text' auto-complete='off' placeholder="账号">
                      <template #prefix>
                        <svg-icon  name="user" class="el-input__icon input-icon"/>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop='password'>
                <el-input v-model="loginForm.password" type='password' auto-complete='off' placeholder="密码">
                    <template #prefix>
                        <svg-icon  name="password" class="el-input__icon input-icon"/>
                    </template>
                </el-input>
            </el-form-item>
              <el-form-item prop="code">
                <el-input
                v-model="loginForm.code"
                auto-complete="off"
                placeholder="验证码"
                style="width: 67%"
                >
                    <template #prefix>
                        <svg-icon  name="validCode" class="el-input__icon input-icon"/>
                    </template>
                </el-input>
                <div class="login-code">
           
                </div>
            </el-form-item>
   
            <el-checkbox v-model="loginForm.rememberMe" style="width:100%;margin:0px 0px 25px 0px;">记住密码</el-checkbox>
            <el-form-item style="width:100%;">
                <el-button
                :loading="loading"
                size="medium"
                type="primary"
                style="width:100%;"
             
                >
                <span v-if="!loading">登 录</span>
                <span v-else>登 录 中...</span>
                </el-button>
            </el-form-item>
        </el-form>
        <div class="el-login-footer">
        <span>Copyright © 2018-2021 zen.joker All Rights Reserved.</span>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            loginForm:{
                username:'',
                password:'',
                code:'',
                rememberMe:false
            },
            loginRules: {
                    username: [
                    { required: true, trigger: "blur", message: "用户名不能为空" }
                    ],
                    password: [
                    { required: true, trigger: "blur", message: "密码不能为空" }
                    ],
                    code: [{ required: true, trigger: "change", message: "验证码不能为空" }]
            },
            loading:false
        }
    }
}
</script>
<style lang="scss" scoped>
    .login{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        background-image: url("../assets/login-background.jpg");
        background-size: cover;
    }
    .title {
        margin: 0px auto 30px auto;
        text-align: center;
        color: #707070;
        }

    .login-form{
        width: 400px;
        border-radius: 6px;
        padding: 25px 25px 5px 25px;
        background: white;
        .el-input {
            height: 38px;
            input {
                height: 38px;
            }
        }
        .input-icon{
            width: 14px;
            height: 39px;
            margin-left: 2px;
        }
    }
    .el-login-footer {
        height: 40px;
        line-height: 40px;
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
        color: #fff;
        font-family: Arial;
        font-size: 12px;
        letter-spacing: 1px;
        }
    .login-code {
        width: 33%;
        height: 38px;
        float: right;
        img {
            cursor: pointer;
            vertical-align: middle;
        }
        }
</style>